<template>
  <li id="customMenuSetting" class="tab-pane row tab-item">
    <div class="list-header">常用菜单设置</div>
    <div class="col-lg-6 sm-col">
      <div class="query-clean-box title-box tree-query-box">
        <div class="header">所有菜单列表：</div>
        <div class="custom-men-search">
          <div class="cm-search-text col-lg-8">
            <div class="query-box form-group clean-group">
              <input
                type="text" class="form-control"
                v-model="menVal"
                @input="searchMenus(menVal)"
                @propertychange="searchMenus(menVal)"
              >
              <a class="input-clean-btn" role="button"></a>
            </div>
          </div>
          <button class="cm-search-button btn btn-default query-btn">搜索</button>
        </div>
        <div class="custem-menu-tree">
          <!--查询结果树-->
          <ul class="query-results-list">

          </ul>
          <!--所有菜单树-->
          <aside class="sidebar default-list setMenu-qy">
            <ul @click="showIndex" class="tree-box metismenu">
              <li :showDir="showDir[k]" :is="rootHTML" v-if="indexMenuData !== ''" v-for="(rootItem,k) in indexMenuData" :rootItem="rootItem" :uapMenuVos="indexMenu" :key="k"></li>
            </ul>
          </aside>
        </div>
      </div>
    </div>
    <div class="col-lg-6 sm-col">
      <div class="custmen-menu-list title-box">
        <div class="header">常用菜单：</div>
        <ul class="selected-menu-box">
          <li class='leaf_li'
              v-if="customMenus.status === 'SUCCESS' || customMenus.body.length>0"
              v-for="item of customMenus.body"
              :menuCode="item.uumsFunction.functionCode"
          >
            <label>{{item.uumsFunction.functionName}}</label>
            <span class='icon-btn delete' @click="delCustomMenu(item)"></span>
            <span @click="down" class='icon-btn down'></span>
            <span @click="up" class='icon-btn up'></span>
          </li>
        </ul>
      </div>
    </div>
  </li>
</template>

<script>
  import {getFarther} from '../../../utils/utils'
  import store from '../../../store/store'
  import {mapState} from 'vuex'
  import rootHTML from './customMenuSetting/rootHTML'
    export default {
      name: "custom-menu-setting",
      store,
      data(){
        return {
          searchResult:{
            flag:false,
            resultContainer:[],
          },
          menVal:'',
          rootHTML:rootHTML,
          indexMenuData:'',
          showDir:[],
        }
      },
      computed:{
        ...mapState('menusStore',['customMenus','methods','indexMenu'])
      },
      methods:{
        down(){},
        up(){},
        showIndex(e){
          let dom = getFarther('root-qy',e.target);
          if(dom.classList.contains('active')){
            dom.classList.remove('active')
          }else{
            let firstLi = document.querySelectorAll('.setMenu-qy>ul>.root-qy');
            for(let i = 0;i < firstLi.length;++i){
              firstLi[i].classList.remove('active');
            }
            this.showDir.splice(dom.k,1,true);
            this.$nextTick(()=>{
              	dom.classList.add('active');
              	let doms = dom.querySelectorAll('.root-qy');
                for(let i = 0;i < doms.length;++i){
          				doms[i].k = i;
          			}
              });
          }
        },
        delCustomMenu(uapMenuVo){
          this.axios.post(
            MENUUSER_SERVICE_URL + 'customMenu/delCustomMenu',
            {menuCode: menu.uumsFunction.functionCode}).then((res)=>{
              let data = res.data;
            if (data.status === 'SUCCESS') {

            } else if (data.status === 'FAILURE') {
              Ext.Msg.alert("操作失败 !", data.body);
            }
          });
        },
        searchMenus(menVal){
          var $menuSearchInput = $(this);
          var $resultContainer = $menuSearchInput.parents('.query-clean-box').find('.query-results-list');

          $resultContainer.html(''); // 搜索前清空上次搜索结果
          this.searchResult.resultContainer = [];
          let keyword = menVal;
          if(fuzzySearchRegex.test(keyword)){
            this.searchResult.flag = false;
            // $resultContainer.html('<div class="no-result">搜索不到您需要的结果 !</div>');
          }else if ( !fuzzySearchRegex.test(keyword) && keyword.length >= 2) {
            this.searchResult.flag = true;
            this.methods.queryMenus(keyword, function (uapMenuVos) {
              let resultHtml =
                '<li class="leaf_li">' +
                '<label>{functionName}</label>' +
                '<span class="icon-btn add" />' +
                '</li>';

              if (!uapMenuVos || uapMenuVos.length == 0) {
                this.searchResult.flag = false;
                // $resultContainer.html('<div class="no-result">搜索不到您需要的结果 !</div>');
              }

              $.each(uapMenuVos, function (index, item) {
                // 构建快捷键展示文字
                var $resultHtml = $(resultHtml.replace('{functionName}', item.uumsFunction.functionName));
                if (item.customMenu && item.customMenu.id) { // 添加已收藏常用菜单样式
                  $resultHtml.addClass('save');
                }
                var collectClickFunction = function () { // 构建收藏事件和样式操作
                  if (!$resultHtml.hasClass('save')) {
                    addCustomMenu(item, function () {
                      $resultHtml.addClass('save');
                      addCustomMenuDomOpt(item);
                    });
                  }
                }

                $resultHtml.find("span.icon-btn.add").click(collectClickFunction);   // 收藏事件添加

                // 渲染dom
                $resultContainer.append($resultHtml);
              });
            });
          }
        }
      },
      watch:{
        indexMenu(r){
          if(r !== ''){
            this.indexMenuData = [];
            for(let i = 0;i<r.length;++i){
              if(r[i].uumsFunction.parentFunction === '0'){
                this.indexMenuData.push(r[i]);
                this.showDir.push(false);
              }
            }
            this.$nextTick(()=>{
      			let firstLi = document.querySelectorAll('.setMenu-qy>ul>.root-qy');
      				for(let i = 0;i < firstLi.length;++i){
          			firstLi[i].k = i;
        			}
      			});
          }
        }
      }
    }
</script>

<style lang="less">

</style>
